<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
    <script src="jquery-ui.js"></script>
    <script src="jsplumb.js"></script>
    <style>
        .left {
            border: 1px solid red;
            float: left;
            width: 400px;
            height: 600px;
        }

        .source {
            border: 1px solid #c8c8c8;
            width: 100px;
            height: 100px;
        }

        .right {
            border: 1px solid red;
            float: left;
            width: 800px;
            height: 600px;
        }

        #canvas {
            border: 1px solid red;
            width: 800px;
            height: 800px;
        }

        .window {
            position: absolute;
            width: 60px;
            height: 60px;
            border: 2px dotted #ccc;
        }

        .window:hover {
            cursor: move;
        }

    </style>
</head>
<body>
<button type="button" id="add">增加一个元素</button>

<div draggable="true" ondragstart="drag(event)">拖起我好耍</div>
<div id="canvas" style="position: relative;" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div class="window" id="window1" style="top:100px;left:100px;"><strong>1</strong><br/><br/></div>
    <div class="window" id="window2" style="top:200px;left:400px;"><strong>2</strong><br/><br/></div>
</div>
<script>
    var index = 3;
    //    $('#add').click(function () {
    //        var current = index++;
    //        $('#canvas').append('<div class="window" id="window' + (current) + '" style="top:' + (current) + '00px;left:' + (current) + '00px;"><strong>' + (current) + '</strong><br/><br/></div>');
    //
    //
    //        $('.window').bind('dblclick', function () {
    //            if (confirm('是不是要删除？')) {
    //                $(this).remove();
    //            }
    //        })
    //    });

    var current = index++;

    function drag(event) {
        event.dataTransfer.setData("label", $(event.target).text());
    }

    function drop(event) {
        debugger;
        var x = event.offsetX;
        var y = event.offsetY;
        $('#canvas').append('<div class="window" id="window' + (current) + '" style="top:' + (y) + 'px;left:' + (x) + 'px;"><strong>' + (event.dataTransfer.getData("label")) + '</strong><br/><br/></div>');
    }

    function allowDrop(ev) {
        ev.preventDefault();
    }

    function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    }

    function guid() {
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    }

    console.log(guid());
    console.log(guid());
    console.log(guid());
</script>
<script>
    jsPlumb.ready(function () {

        var instance = window.jsp = jsPlumb.getInstance({
            // default drag options
            DragOptions: {cursor: 'pointer', zIndex: 2000},
            // the overlays to decorate each connection with.  note that the label overlay uses a function to generate the label text; in this
            // case it returns the 'labelText' member that we set on each connection in the 'init' method below.
            ConnectionOverlays: [
                ["Arrow", {
                    location: 1,
                    visible: true,
                    width: 11,
                    length: 11,
                    id: "ARROW",
                    events: {
                        click: function () {
                            alert("you clicked on the arrow overlay")
                        }
                    }
                }],
                ["Label", {
                    location: 0.1,
                    id: "label",
                    cssClass: "aLabel",
                    events: {
                        tap: function () {
                            alert("hey");
                        }
                    }
                }]
            ],
            Container: "canvas"
        });

//        var basicType = {
//            connector: "StateMachine",
//            paintStyle: {stroke: "red", strokeWidth: 4},
//            hoverPaintStyle: {stroke: "blue"},
//            overlays: [
//                "Arrow"
//            ]
//        };
//        instance.registerConnectionType("basic", basicType);

        // this is the paint style for the connecting lines..
        var connectorPaintStyle = {
                strokeWidth: 2,
                stroke: "#61B7CF",
                joinstyle: "round",
                outlineStroke: "white",
                outlineWidth: 2
            },
            // .. and this is the hover style.
            connectorHoverStyle = {
                strokeWidth: 3,
                stroke: "#216477",
                outlineWidth: 5,
                outlineStroke: "white"
            },
            endpointHoverStyle = {
                fill: "#216477",
                stroke: "#216477"
            },
            // the definition of source endpoints (the small blue ones)
            sourceEndpoint = {
                endpoint: "Dot",
                paintStyle: {
                    stroke: "#7AB02C",
                    fill: "transparent",
                    radius: 7,
                    strokeWidth: 1
                },
                maxConnections: -1,
                isTarget: true,
                isSource: true,
                connector: ["Flowchart", {
                    stub: [30, 60],
                    gap: 10,
                    cornerRadius: 5,
                    alwaysRespectStubs: true,
                    midpoint: 0.9
                }],
                connectorStyle: connectorPaintStyle,
                hoverPaintStyle: endpointHoverStyle,
                connectorHoverStyle: connectorHoverStyle,
                dragOptions: {},
                overlays: [
                    ["Label", {
                        location: [0.5, 1.5],
                        label: "Drag",
                        cssClass: "endpointSourceLabel",
                        visible: false
                    }]
                ]
            },

            init = function (connection) {
                connection.bind('dblclick', function (conn) {
                    conn.getOverlay('label').setLabel('老子不是线');
                })
                connection.getOverlay("label").setLabel('我是线');

                connection.bind('click', function (conn) {
                    if (confirm('你是不是要删除？')) {
                        debugger;
                        instance.deleteConnection(conn)
                    }
                })
            };

        var _addEndpoints = function (toId, sourceAnchors) {
            for (var i = 0; i < sourceAnchors.length; i++) {
                var sourceUUID = toId + sourceAnchors[i];
                instance.addEndpoint(toId, sourceEndpoint, {
                    anchor: sourceAnchors[i], uuid: sourceUUID
                });
            }
        };

        // suspend drawing and initialise.
        instance.batch(function () {

            _addEndpoints("window1", ["TopCenter", "BottomCenter", "LeftMiddle", "RightMiddle"]);
            _addEndpoints("window2", ["TopCenter", "BottomCenter", "LeftMiddle", "RightMiddle"]);


            // listen for new connections; initialise them the same way we initialise the connections at startup.
            instance.bind("connection", function (connInfo, originalEvent) {
                init(connInfo.connection);
            });

            // make all the window divs draggable
            instance.draggable(jsPlumb.getSelector(".window"), {containment: "parent"});
            // THIS DEMO ONLY USES getSelector FOR CONVENIENCE. Use your library's appropriate selector
            // method, or document.querySelectorAll:
            //jsPlumb.draggable(document.querySelectorAll(".window"), { grid: [20, 20] });

            // connect a few up
            instance.connect({
                uuids: ["window1TopCenter", "window2TopCenter"],
                editable: true
            })

            //

            //
            // listen for clicks on connections, and offer to delete connections on click.
            //
            instance.bind("click", function (conn, originalEvent) {
                // if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
                //   instance.detach(conn);
                //conn.toggleType("basic");
            });

            instance.bind("connectionDrag", function (connection) {
                console.log("connection " + connection.id + " is being dragged. suspendedElement is ", connection.suspendedElement, " of type ", connection.suspendedElementType);
            });

            instance.bind("connectionDragStop", function (connection) {
                console.log("connection " + connection.id + " was dragged");
            });

            instance.bind("connectionMoved", function (params) {
                console.log("connection " + params.connection.id + " was moved");
            });
        });

        jsPlumb.fire("jsPlumbDemoLoaded", instance);

    });
</script>


<script type="text/javascript">
    //节点默认参数
    var node = {
        nodeId: null,//节点id
        nodeType: null,//节点类型
        x: null,//位置x
        y: null,//位置y
        title: null,//节点标题
        nodeData: null,//节点数据

    };
    //连接线默认参数
    var line = {
        lineId: null,//连接线id
        sourcePointId: null,//线的起点id
        targetPointId: null,//线的终点id
        title: null,//线的标题文本
        lineData: null, //线的数据
        //onConfig: null//双击线条开始配置线条属性时:function(lineData,refreshCallback),refreshCallback:function(title,lineData)//刷新线条数据,传入title,线条数据
    };
    //开始节点类型
    var beiginNodeType = {
        name: 'Begin',//节点类型名称,
        class: 'node-begin',//节点样式
        title: '开始',//开始节点标题
        onConfig: null//双击节点开始配置节点属性时:function(nodeData,refreshCallback),refreshCallback:function(title,nodeData)//刷新节点数据,传入title,节点数据
    };
    //介绍节点类型
    var endNodeType = {};
    //审批节点类型
    var approveNodeType = {};
    //任务节点类型
    var taskNodeType = {};
    //子流程节点类型
    var subFlowNodeType = {};
    //并行分支开始节点类型
    var parallelBeiginNodeType = {};
    //并行分支结束节点类型
    var parallelEndNodeType = {};


    var flowChartLineType = {
        name: 'FlowChart',
        lineType: 'FlowChart',
        style: {},
        hoverStyle: {},
        onConfig: null
    }

    function flowDesigner() {
        this.jsPlumb = null;
    }

    /**
     *初始化设计器容器
     * @elContainer 设计器容器元素 id
     * @nodes 所有的节点
     * @lines 所有的连接线
     * @options 参数
     * */
    flowDesigner.prototype.init = function (elContainer, nodes, lines, options) {
        this.jsPlumb = jsPlumb.getInstance({
            DragOptions: {cursor: 'move', zIndex: 2000},
            ConnectionOverlays: [
                ["Arrow", {
                    location: 1,
                    visible: true,
                    width: 11,
                    length: 11,
                    id: "ARROW"
                }],
                ["Label", {
                    location: 0.1,
                    id: "label",
                    cssClass: "aLabel"
                }]
            ],
            Container: elContainer
        });
        var _this = this;
        var connectorPaintStyle = {
                strokeWidth: 2,
                stroke: "#61B7CF",
                joinstyle: "round",
                outlineStroke: "white",
                outlineWidth: 2
            },
            connectorHoverStyle = {
                strokeWidth: 3,
                stroke: "#216477",
                outlineWidth: 5,
                outlineStroke: "white"
            },
            endpointHoverStyle = {
                fill: "#216477",
                stroke: "#216477"
            },
            sourceEndpoint = {
                endpoint: "Dot",
                paintStyle: {
                    stroke: "#7AB02C",
                    fill: "transparent",
                    radius: 7,
                    strokeWidth: 1
                },
                maxConnections: -1,
                isTarget: true,
                isSource: true,
                connector: ["Flowchart", {
                    stub: [30, 60],
                    gap: 10,
                    cornerRadius: 5,
                    alwaysRespectStubs: true,
                    midpoint: 0.9
                }],
                connectorStyle: connectorPaintStyle,
                hoverPaintStyle: endpointHoverStyle,
                connectorHoverStyle: connectorHoverStyle,
                dragOptions: {},
                overlays: [
                    ["Label", {
                        location: [0.5, 1.5],
                        label: "Drag",
                        cssClass: "endpointSourceLabel",
                        visible: false
                    }]
                ]
            };
        return this;
    }

    /**
     * 添加一个节点
     * @elNode 节点元素id
     * @options 参数
     * */
    flowDesigner.prototype.addNode = function (elNode, options) {

    }

    flowDesigner.prototype.getAllNodes = function () {

    }

    flowDesigner.prototype.getAllLines = function () {

    }

    /**
     * 注册一种节点
     *  @options 节点类型参数
     * */
    flowDesigner.prototype.registerNodeType = function (options) {

    }

    /**
     * 注册一种连接线
     *  @options 连接线类型参数
     * */
    flowDesigner.prototype.registerLineType = function (options) {

    }

    var designer = new flowDesigner().init('canvas');

</script>

</body>
</html>